<template>
  <div id="w-app">
    <nav-bar v-ref:navigation-bar></nav-bar>
    <div id="w-main">
      <div id="w-wrapper">
        <div id="w-window">
          <router-view></router-view>
        </div>
      </div>
    </div>
  </div>
</template>

<script type="text/babel">
  import $ from 'jquery'
  import '../static/js/thirdparty/jquery.mousewheel'
  import '../static/js/thirdparty/jquery.perfect-scrollbar'
  import NavBar from './components/NavBar'
  import Vue from 'vue'
  import Vuex from 'vuex'
  import VueResource from 'vue-resource'
  import NProgress from 'nprogress'
  import Application from './app/application'

  Vue.use(Vuex)
  Vue.use(VueResource)
  Vue.use(Application)

  var store = new Vuex.Store()

  export default {
    components: {
      NavBar
    },
    store,
    created: function () {
      NProgress.configure({
        parent: '#w-wrapper'
      })
    },
    data: function () {
      return {
        navItems: [
          {
            name: '产品',
            path: '/product'
          },
          {
            name: 'IPTV渠道',
            path: '/iptv/index'
          }
        ]
      }
    },
    attached: function () {
      var self = this
      var main = $($(self.$el).find('#w-main'))
      var win = $(main.find('#w-window'))
      console.log(main.height())
      win.height(main.height())
      win.perfectScrollbar()

      self.$refs.navigationBar.initItems(self.navItems, 0)
    },
    ready: function () {
      this.$application.run(this)
    }
  }
</script>

<style lang="less">
  @import "../node_modules/nprogress/nprogress.css";
  @import "../static/css/thirdparty/perfect-scrollbar.css";
  @import "./assets/styles/commons.less";

  @full-height: 100%;

  html, body {
    height: @full-height;
    overflow: hidden;
  }
  #w-app {
    height: @full-height;
  }
  #w-main {
    padding-top: 51px;
    background-color: @w-background-color;
    height: @full-height;
  }
  #w-wrapper {
  }
  #w-window {
    padding-top: 10px;
    overflow: hidden;
    position: relative;
  }
</style>
